<template>
  <div class="pair-container">
    <div class="pair-header">
      <div class="search">
        <el-form :inline="true">
          <el-form-item label="流程卡号" label-width="72px">
            <el-input
              placeholder="请输入"
              prefix-icon="el-icon-search"
              v-model="cardcode"
              size="mini"
              clearable
              @change="
                () => {
                  initData();
                  getLineProductCard();
                }
              "
            >
            </el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              v-model="value"
              placeholder="请选择"
              size="mini"
              @change="
                () => {
                  initData();
                  getLineProductCard();
                }
              "
              clearable
            >
              <el-option
                v-for="item in tableCheck == 0 ? options : options2"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="客户" prop="dateList">
            <el-select
              v-model="clientName"
              placeholder="请选择"
              size="mini"
              @change="
                () => {
                  initData();
                  getLineProductCard();
                }
              "
              clearable
            >
              <el-option
                v-for="item in clientNameList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="级别" prop="dateList">
            <el-select
              v-model="urgent"
              placeholder="请选择"
              size="mini"
              @change="
                () => {
                  initData();
                  getLineProductCard();
                }
              "
              clearable
            >
              <el-option label="普通" :value="2"> </el-option>
              <el-option label="加急" :value="1"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="tableCheck == 1">
            <el-button type="primary" size="mini" @click="handlerOutWait(1)"
              >出片</el-button
            >
            <el-button type="warning" size="mini" @click="handlerOutWait(0)"
              >等待</el-button
            >
          </el-form-item>
          <!-- <el-form-item label="交货日期" prop="dateList">
            <el-date-picker size="mini" v-model="dateList" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="() => {
            initData();
            getLineProductCard();
          }
          ">
            </el-date-picker>
          </el-form-item> -->
        </el-form>
      </div>
      <div class="radioSelect">
        <div
          v-for="(item, i) in cardList"
          :key="i"
          class="silder"
          @click="handlerCheckLine(item)"
          :class="radio == item.value ? 'bottom-line' : null"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="view">
      <div class="left_label">
        <div
          class="label"
          :class="tableCheck == 0 ? 'active' : ''"
          @click="handlerSwitchLabel(0)"
        >
          未配对({{ rwdList.length }})
        </div>
        <div
          class="label"
          :class="tableCheck == 1 ? 'active' : ''"
          @click="handlerSwitchLabel(1)"
        >
          取片中({{ rwdidNoList.length }})
        </div>
      </div>
      <div class="right_view" v-show="tableCheck == 0">
        <el-table
          :data="tableRwdList"
          height="100%"
          :default-sort="{ prop: 'date', order: 'descending' }"
          :row-class-name="tableRowClassName2"
          border
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="最大宽度:">
                  <span>{{ props.row.maxwidth }}mm</span>
                </el-form-item>
                <el-form-item label="最大高度:">
                  <span>{{ props.row.maxheight }}mm</span>
                </el-form-item>
                <el-form-item label="厚度:">
                  <span>{{ props.row.thick }}mm</span>
                </el-form-item>
                <el-form-item label="片标记:">
                  <span>{{ props.row.tag }}</span>
                </el-form-item>
                <el-form-item label="出片规则:">
                  <span>{{ props.row.outrule }}</span>
                </el-form-item>
                <el-form-item label="进笼时间:">
                  <span>{{
                    props.row.updateTime != null ? props.row.updateTime : ""
                  }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            label="流程卡任务号"
            align="center"
            key="rwdidno"
            prop="rwdidno"
            width="120"
          >
            <template slot-scope="scope">
              <div
                class="rwdidno_text"
                @click="handlerOpenDialog(scope.row, 1)"
              >
                {{ scope.row.rwdidno }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="流程卡号"
            align="center"
            key="cardcode"
            prop="cardcode"
          />
          <el-table-column
            label="交货日期"
            align="center"
            key="spareFieldStr7"
            show-overflow-tooltip
            min-width="150"
            sortable
            prop="spareFieldStr7"
          >
            <template slot-scope="scope">
              {{ scope.row.spareFieldStr7.substring(0, 10) }}
            </template>
          </el-table-column>
          <el-table-column
            label="客户"
            align="center"
            key="clientName"
            min-width="150"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{
                scope.row.optGlasses.length > 0
                  ? scope.row.optGlasses[0].clientName
                  : ""
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="成品名称"
            align="center"
            key="spareFieldStr6"
            show-overflow-tooltip
            min-width="180"
          >
            <template slot-scope="scope">
              {{
                scope.row.onlineGlass.length > 0
                  ? scope.row.onlineGlass[0].optGlass != null
                    ? scope.row.onlineGlass[0].optGlass.spareFieldStr6
                    : ""
                  : ""
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="订单数"
            align="center"
            key="quantity"
            prop="quantity"
            wid
            fit
            show-overflow-tooltip
          />
          <el-table-column
            label="可配对数"
            align="center"
            key="pairedquantity"
            prop="pairedquantity"
            fit
            show-overflow-tooltip
          />
          <el-table-column
            label="已生产数量"
            align="center"
            key="deliveredquantity"
            prop="deliveredquantity"
            fit
            show-overflow-tooltip
          />
          <el-table-column
            label="预计产线"
            align="center"
            key="spareFieldStr8"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{
                scope.row.onlineGlass.length > 0
                  ? scope.row.onlineGlass[0].optGlass != null
                    ? scope.row.onlineGlass[0].optGlass.spareFieldStr8
                    : ""
                  : ""
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="所在笼格"
            align="center"
            key="onlineCage"
            prop="onlineCage"
          />
          <el-table-column
            label="片标记"
            align="center"
            key="tag"
            prop="tag"
            fit
          />

          <el-table-column
            label="出片规则"
            align="center"
            key="outrule"
            prop="outrule"
          />
          <el-table-column label="级别" align="center" key="urgent">
            <template slot-scope="scope">
              <el-tag :type="scope.row.urgent == 1 ? 'danger' : 'info'">
                {{ scope.row.urgent == 1 ? "加急" : "普通" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="进笼时间"
            align="center"
            key="updateTime"
            prop="updateTime"
            width="120"
            sortable
          >
            <template slot-scope="scope">
              <div>
                {{
                  scope.row.updateTime != null
                    ? scope.row.updateTime.slice(5)
                    : ""
                }}
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="状态"
            align="center"
            key="state"
            prop="state"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-tag :type="ruleData[scope.row.rwdidno] | TagColor">
                {{ ruleData[scope.row.rwdidno] | TextName }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" @click="handlerAddCard(scope.row)"
                >添加</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="rightNO_view" v-show="tableCheck == 1">
        <el-table
          :data="tableRwdList2"
          height="100%"
          :default-sort="{ prop: 'date', order: 'descending' }"
          :row-class-name="tableRowClassName2"
          border
        >
          <el-table-column
            label="流程卡任务号"
            align="center"
            key="rwdidno"
            prop="rwdidno"
            width="120"
          >
            <template slot-scope="scope">
              <div
                class="rwdidno_text"
                @click="handlerOpenDialog(scope.row, 2)"
              >
                {{ scope.row.rwdidno }}
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="流程卡号"
            align="center"
            key="cardcode"
            prop="cardcode"
          />

          <el-table-column
            label="交货日期"
            align="center"
            key="spareFieldStr7"
            prop="spareFieldStr7"
            sortable
            show-overflow-tooltip
            min-width="150"
          >
            <template slot-scope="scope">
              {{ scope.row.spareFieldStr7.substring(0, 10) }}
            </template>
          </el-table-column>
          <el-table-column
            label="客户"
            align="center"
            key="clientName"
            show-overflow-tooltip
            min-width="150"
          >
            <template slot-scope="scope">
              {{
                scope.row.optGlasses.length > 0
                  ? scope.row.optGlasses[0].clientName
                  : ""
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="成品名称"
            align="center"
            key="spareFieldStr6"
            show-overflow-tooltip
            min-width="150px"
          >
            <template slot-scope="scope">
              {{
                scope.row.optGlasses.length > 0
                  ? scope.row.optGlasses[0].spareFieldStr6
                  : ""
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="订单数"
            align="center"
            key="quantity2"
            prop="quantity"
            show-overflow-tooltip
          />
          <el-table-column
            label="已生产数量"
            align="center"
            key="deliveredquantity2"
            prop="deliveredquantity"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="出片顺序"
            align="center"
            key="orderNum"
            prop="orderNum"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <div class="orderNum">
                {{ scope.row.orderNum }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="预计产线"
            align="center"
            key="spareFieldStr82"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{
                scope.row.optGlasses.length > 0
                  ? scope.row.optGlasses[0] != null
                    ? scope.row.optGlasses[0].spareFieldStr8
                    : ""
                  : ""
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="片标记"
            align="center"
            key="tag2"
            prop="tag"
          />
          <el-table-column
            label="出片规则"
            align="center"
            key="outrule2"
            prop="outrule"
          />
          <el-table-column label="级别" align="center" key="urgent">
            <template slot-scope="scope">
              <el-tag :type="scope.row.urgent == 1 ? 'danger' : 'info'">
                {{ scope.row.urgent == 1 ? "加急" : "普通" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="配片状态"
            align="center"
            key="ruleState"
            prop="ruleState"
          >
            <template slot-scope="scope">
              <el-tag :type="scope.row.ruleState == 1 ? 'success' : 'warning'">
                {{ scope.row.ruleState == 1 ? "已配齐" : "正在配片" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            align="center"
            key="outState2"
            prop="outState"
          >
            <template slot-scope="scope">
              <el-tag :type="scope.row.outState | colorStatus">
                {{ scope.row.outState | status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="240"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button type="text" @click="handlerPairGlass(scope.row, 4)"
                >配片</el-button
              >
              <el-button
                type="text"
                @click="handleAddQuenue(scope.row, 0)"
                :disabled="scope.orderNum * 1 > 0"
                >加入队列</el-button
              >
              <el-button type="text" @click="handlerPairGlass(scope.row, 2)"
                >移除</el-button
              >
              <el-button type="text" @click="handlerPairGlass(scope.row, 3)"
                >强制出片</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog
      :title="selectRwdId + '流程卡在线玻璃'"
      :visible.sync="dialogOpen"
      width="70%"
    >
      <carcode
        :lineExitData="lineExitData"
        :loadingDialogTable="loadingDialogTable"
        :isLocation="isLocation"
      />
    </el-dialog>
    <div class="tips">
      颜色说明:
      <div
        :style="{
          backgroundColor: 'rgba(255, 255, 0, 0.5)',
          width: '10px',
          height: '10px',
        }"
      ></div>
      表示流程卡内存在离线生产的玻璃
    </div>
  </div>
</template>

<script>
import {
  getRwdInfo,
  addRwdToInsulatingGlassProcessingLine,
  getRwdGlass,
} from "@/api/assembly/behindCage.js";
import { isTimeInRange } from "@/utils/tykj";
import { cardList } from "./config/radio";
import { mapState } from "vuex";
import carcode from "../../components/production/carcode.vue";
import { addQueue, operateRwdLine, outWait } from "@/api/assembly/zkpair";
export default {
  components: {
    carcode,
  },
  dicts: [
    "quartz_glass_state",
    "quartz_common_location_search",
    "quartz_common_location",
  ],
  data() {
    return {
      timer: null,
      cardList,
      radio: 1,
      rwdList: [],
      dialogOpen: false,
      lineExitData: [],
      selectRwdId: "",
      loadingDialogTable: false,
      cardcode: "",
      isLocation: 0,
      dateList: [],
      tableCheck: 0,
      options: [
        {
          label: "×未配齐",
          value: 0,
        },
        {
          label: "✔已配齐",
          value: 1,
        },
        {
          label: "✔已到位",
          value: 2,
        },
      ],
      options2: [
        {
          label: "等待",
          value: 0,
        },
        {
          label: "出片",
          value: 1,
        },
        {
          label: "强制出片",
          value: 2,
        },
        {
          label: "配片",
          value: 3,
        },
      ],
      clientName: "",
      value: "",
      urgent: "",
      dateList: [],
      tableRwdList: [],
      tableRwdList2: [],
      sortRule: { prop: null, order: null },
    };
  },
  methods: {
    handlerOutWait(num) {
      let data = {
        id: this.radio,
        operateType: num,
      };
      outWait(data).then((res) => {
        this.$message.success("操作成功");
        this.getLineProductCard();
      });
    },
    handleAddQuenue(item, e) {
      let data = {
        id: item.id,
        operateType: e,
      };
      addQueue(data).then(() => {
        this.$message.success("操作成功");
        this.getLineProductCard();
      });
    },
    openLosses(e) {
      this.$openLosses.showDialog(e, this.isLocation);
    },
    handlerSwitchLabel(e) {
      this.value = "";
      this.cardcode = "";
      this.clientName = "";
      this.urgent = "";
      this.dateList = [];
      this.tableCheck = e;
      this.initData();
      this.getLineProductCard();
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.optGlass.downState == "下架") {
        return "downState";
      } else if (
        row != null &&
        row.id &&
        row.place == "ZKBehindCage" &&
        row.state == "0"
      ) {
        return "success-row";
      } else {
        return "warning-row";
      }
    },
    tableRowClassName2({ row, rowIndex }) {
      if (row.optGlasses.some((a) => a.downState == "下架")) {
        return "downState2";
      }
    },
    handlerOpenDialog(e, location) {
      this.isLocation = location;
      this.selectRwdId = e.rwdidno + "(" + e.cardcode + ")";
      this.dialogOpen = true;
      this.loadingDialogTable = true;
      let params = {
        id: e.id,
        rwdidno: e.rwdidno,
      };
      getRwdGlass(params).then((res) => {
        this.lineExitData = res.data;
        this.loadingDialogTable = false;
      });
    },
    handlerPairGlass(item, e) {
      let data = {
        id: item.id,
        operateType: e,
      };
      if (e == 3) {
        this.$prompt("请输入密码", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPattern: /^zlhz8863$/,
          inputErrorMessage: "密码错误",
          inputType: "password",
        }).then(({ value }) => {
          this.sendActionGlass(data);
        });
      } else {
        this.sendActionGlass(data);
      }

      // if (e == 3) {
      //   this.$confirm(
      //     "该功能将强制只出该流程卡的玻璃,按订序出片,并不保证能配对出片,如您需要配对出片,请选择出片,而非强制出片",
      //     "提示",
      //     {
      //       confirmButtonText: "确定",
      //       cancelButtonText: "取消",
      //       type: "warning",
      //     }
      //   ).then(() => {
      //     this.$prompt("请输入密码", "提示", {
      //       confirmButtonText: "确定",
      //       cancelButtonText: "取消",
      //       inputPattern: /^zlhz8863$/,
      //       inputErrorMessage: "密码错误",
      //       inputType: "password",
      //     }).then(({ value }) => {
      //       this.sendActionGlass(data);
      //     });
      //   });
      // } else if (e == 1) {
      //   let arr = this.rwdidNoList.filter(
      //     (item) => item.outState == 1 || item.outState == 2
      //   );
      //   arr.length != 0
      //     ? this.$confirm(
      //         "系统中已有其他流程卡在出片,如果多个流程卡同时出片,可能会导致出片顺序混乱。",
      //         "提示",
      //         {
      //           confirmButtonText: "确定",
      //           cancelButtonText: "取消",
      //           type: "warning",
      //         }
      //       ).then(() => {
      //         this.sendActionGlass(data);
      //       })
      //     : this.sendActionGlass(data);
      // } else {
      //   this.sendActionGlass(data);
      // }
    },
    sendActionGlass(data) {
      operateRwdLine(data).then((res) => {
        this.$message.success("操作成功");
        this.initData();
        this.getLineProductCard();
      });
    },
    handlerAddCard(item) {
      this.$confirm("此操作将选中的流程卡号进行取片, 是否继确定?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        addRwdToInsulatingGlassProcessingLine({
          optMasterList: [item],
          id: this.radio,
        }).then((res) => {
          this.$message.success(res.msg || "操作成功");
          this.initData();
          this.getLineProductCard();
        });
      });
    },
    handlerCheckLine(item) {
      this.radio = item.value;
      this.initData();
      this.getLineProductCard();
    },
    initData() {
      let that = this;
      this.tableCheck == 0 &&
        getRwdInfo({ cardCode: this.cardcode }).then((res) => {
          this.rwdList = res.data;
          that.tableRwdList = res.data
            .filter((item) => {
              return (
                this.value == "" ||
                this.$options.filters.TextName(this.ruleData[item.rwdidno]) ==
                  this.value
              );
            })
            .filter((item) => {
              if (this.dateList == null || this.dateList.length == 0)
                return true;
              let jhDate =
                item.onlineGlass.length > 0
                  ? item.onlineGlass[0].optGlass != null
                    ? item.onlineGlass[0].optGlass.spareFieldStr7
                    : ""
                  : "";
              if (!jhDate) return;
              return (
                this.dateList.length != 0 &&
                isTimeInRange(jhDate.replace(".0", ""), this.dateList)
              );
            })
            .filter((item) => {
              return this.clientName == item.custom || this.clientName == "";
            });
          that.tableRwdList.forEach((item, index) => {
            that.tableRwdList[index].spareFieldStr7 =
              item.optGlasses.length > 0 && item.optGlasses[0].spareFieldStr7
                ? item.optGlasses[0].spareFieldStr7
                : "1970-01-01 00:00:00";
            let urgentRange = [0, 1, 2];
            that.tableRwdList[index].urgent =
              item.optGlasses.length > 0 &&
              item.optGlasses.some((a) => urgentRange.includes(a.urgent))
                ? 1
                : 2;
          });
          that.tableRwdList = that.tableRwdList.filter((item) => {
            return item.urgent == this.urgent || this.urgent == "";
          });
        });
    },
    filterData() {
      this.tableRwdList2 = this.rwdidNoList;
      this.tableRwdList2.sort((a, b) => {
        if (a.orderNum == 0) return 1;
        if (b.orderNum == 0) return -1;
        return a.orderNum - b.orderNum;
      });
      this.tableRwdList2.forEach((item, index) => {
        this.tableRwdList2[index].spareFieldStr7 =
          item.optGlasses.length > 0 && item.optGlasses[0].spareFieldStr7
            ? item.optGlasses[0].spareFieldStr7
            : "1970-01-01 00:00:00";

        this.tableRwdList2[index].ruleState = !item.onlineGlass
          ? 0
          : item.quantity - item.deliveredquantity ==
            item.onlineGlass.filter(
              (item) =>
                item.id && item.place == "ZKBehindCage" && item.state == "0"
            ).length
          ? 1
          : 0;
        let urgentRange = [0, 1, 2];

        this.tableRwdList2[index].urgent =
          item.optGlasses.length > 0 &&
          item.optGlasses.some((a) => urgentRange.includes(a.urgent))
            ? 1
            : 2;
      });

      this.tableRwdList2 = this.tableRwdList2
        .filter((item) => {
          return item.cardcode.includes(this.cardcode) || this.cardcode == "";
        })
        .filter((item) => {
          return item.custom == this.clientName || this.clientName == "";
        })
        .filter((item) => {
          return item.urgent == this.urgent || this.urgent == "";
        })
        .filter((item) => {
          return (
            this.value == "" ||
            this.$options.filters.status(item.outState) == this.value
          );
        })
        .filter((item) => {
          if (this.dateList == null || this.dateList.length == 0) return true;
          let jhDate =
            item.optGlasses.length > 0 ? item.optGlasses[0].spareFieldStr7 : "";
          if (!jhDate) return;
          return (
            this.dateList.length != 0 &&
            isTimeInRange(jhDate.replace(".0", ""), this.dateList)
          );
        });
    },
    async getLineProductCard() {
      let paramList = this.radio;
      await this.$store.dispatch("getKongLineGalss", paramList);
      this.filterData();
    },
  },
  computed: {
    ...mapState({
      rwdidNoList(state) {
        if (state.deviceStatus.deviceParams.length != 0) {
          return state.deviceStatus.deviceParams.rwdidNoList;
        } else {
          return [];
        }
      },
    }),
    ruleData() {
      let map = {};
      this.rwdList.forEach((item) => {
        if (map[item.rwdidno]) {
          map[item.rwdidno].num++;
        } else {
          map[item.rwdidno] = {};
          map[item.rwdidno].num = 1;
          map[item.rwdidno].maxNum = Array.from(
            new Set(item.outrule.split("-").filter((item) => item !== ""))
          ).length;
          map[item.rwdidno].isProd = true;
        }
        if (item.quantity != item.pairedquantity) {
          map[item.rwdidno].isProd = false;
        }
        if (item.onlineGlass.length == item.optGlasses.length) {
          return item.onlineGlass.filter((a) => {
            return (
              this.$options.filters.stateName(a) == "已到B笼" ||
              a.optGlass.downState == "下架"
            );
          }).length == item.optGlasses.length
            ? (map[item.rwdidno].isReach = true)
            : (map[item.rwdidno].isReach = false);
        } else {
          map[item.rwdidno].isReach = false;
        }
      });
      return map;
    },
    clientNameList() {
      let arr = [];
      let arr2 = [];
      this.tableRwdList.forEach((item) => {
        arr.includes(item.custom) ? "" : arr.push(item.custom);
      });
      this.rwdidNoList &&
        this.rwdidNoList.forEach((item) => {
          arr2.includes(item.custom) ? "" : arr2.push(item.custom);
        });
      return this.tableCheck == 0 ? arr : arr2;
    },
  },
  filters: {
    status(arg) {
      let arr = ["等待", "出片", "强制出片", "配片", "正在配片", ""];
      return arr[arg];
    },
    colorStatus(arg) {
      let arr = ["info", "primary", "warning", "success"];
      return arr[arg];
    },
    longNumber(arg) {
      let a = Math.ceil(arg / 50);
      return a > 6 ? Math.ceil((300 - arg) / 23) + a : a;
    },
    TagColor(arg) {
      return arg.isProd && arg.num == arg.maxNum
        ? arg.isReach == true
          ? "success"
          : "warning"
        : "danger";
    },
    TextName(arg) {
      return arg.isProd && arg.num == arg.maxNum
        ? arg.isReach == true
          ? "✔已到位"
          : "✔已配齐"
        : "×未配齐";
    },
    stateColor(arg) {
      return arg.optGlass.downState == "下架"
        ? "success"
        : arg.id &&
          arg.place == "ZKBehindCage" &&
          arg.state == "0" &&
          arg.status == "0" &&
          arg.lineExist == "1"
        ? "success"
        : "warning";
    },
    stateName(arg) {
      return arg.optGlass.downState == "下架"
        ? "离线生产"
        : arg.id && arg.place == "ZKBehindCage" && arg.state == "0"
        ? "已到B笼"
        : arg.status == "1" || arg.state == 2
        ? "玻璃异常"
        : arg.state == "1"
        ? "已报损"
        : arg.lineExist == "0"
        ? "正在生产"
        : !arg.id
        ? "未上线"
        : "未到B笼";
    },
    stateColor2(arg) {
      let places = [
        "ZKReceivingStation1",
        "ZKReceivingStation2",
        "ZKReceivingStation3",
        "ZKReceivingStation4",
      ];
      return arg.optGlass.downState == "下架"
        ? "success"
        : arg.id && places.includes(arg.place) && arg.lineExist == "0"
        ? "success"
        : arg.state != "0" || arg.status != "0" || arg.lineExist != "1"
        ? "danger"
        : "warning";
    },
    stateName2(arg) {
      let places = [
        "ZKReceivingStation1",
        "ZKReceivingStation2",
        "ZKReceivingStation3",
        "ZKReceivingStation4",
      ];
      return arg.optGlass.downState == "下架"
        ? "离线生产"
        : arg.state != "0" && arg.id == null
        ? "未生产"
        : arg.state != "0"
        ? "已报损"
        : arg.status != "0" || arg.state == 2
        ? "玻璃异常"
        : arg.id && places.includes(arg.place) && arg.lineExist == "0"
        ? "✔已生产"
        : arg.lineExist == "0"
        ? "已下线"
        : "×未取片";
    },
  },
  created() {
    clearInterval(this.timer);
    this.initData();
    this.timer = setInterval(() => {
      this.initData();
    }, 10000);
    this.getLineProductCard();
  },
  mounted() {},
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="less" scoped>
/deep/.el-form-item__content {
  width: 140px;
}

.orderNum {
  font-size: 24px;
  font-weight: bold;
}
.tips {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.demo-table-expand {
  font-size: 0;
}

/deep/ .demo-table-expand .el-form-item__label {
  padding-right: 5px;
  color: #696b6f;
}

.demo-table-expand .el-form-item {
  margin-left: 60px;
  margin-bottom: 0;
  width: 25%;
}

/deep/ .el-date-editor--datetimerange.el-input,
.el-date-editor--datetimerange.el-input__inner {
  width: 320px;
}

.el-table td.el-table__cell div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/deep/ .el-form-item {
  margin-bottom: 0;
}

/deep/ .el-table {
  .warning-row {
    background: oldlace;
  }

  .success-row {
    background: #f0f9eb;
  }

  .danger-row {
    background: #fef0f0;
  }

  .downState {
    background: rgba(255, 255, 0, 0.4);
  }

  .downState2 {
    background: rgba(255, 255, 0, 0.2);
  }

  .cell {
    padding: 0 !important;
    font-size: 14px;
  }
}

/deep/ .el-table__cell {
  padding: 5px 0;
}

/deep/ .el-dialog__body {
  padding: 10px 20px !important;
}

.pair-container {
  height: 100%;
  padding: 0 10px 0px 10px;
  display: flex;
  flex-direction: column;

  .pair-header {
    min-height: 35px;
    display: flex;

    .search {
      width: 70%;
      display: flex;
      align-items: center;
    }

    .radioSelect {
      margin-left: auto;
      display: flex;

      .silder {
        height: 34px;
        min-width: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
        transform: translateY(1px);
      }
    }

    .bottom-line {
      background: linear-gradient(#fafafa, #1890ff);
    }

    .silder:hover {
      border-bottom: 2px solid #409eff;
    }

    .recument-no {
      width: 100%;
      height: 50px;
    }

    .tips {
      height: 100%;
      display: flex;
      align-items: center;
      margin-left: auto;
      margin-right: 20px;
      letter-spacing: 1.5px;
      font-size: 16px;
    }
  }

  .view {
    max-height: calc(100vh - 110px);
    flex: 1;
    display: flex;
    border: 1px solid #e6e6e6;

    .left_label {
      width: 10%;
      height: 100%;
      display: flex;
      flex-direction: column;

      .label {
        width: 98%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 20px;
        letter-spacing: 2px;
        background-color: #eceff7;
        margin-top: 5px;
        cursor: pointer;
      }

      .label:hover {
        color: #fff;
        background-color: #1890ff;
      }

      .active {
        color: #fff;
        background-color: #1890ff;
      }
    }

    .right_view,
    .rightNO_view {
      position: relative;
      width: 90%;
      height: 100%;
      border-left: 1px solid #e6e6e6;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      justify-content: space-between;
      overflow: auto;
      border-right: 1px solid #e6e6e6;

      .rwdidno_text {
        color: #1890ff;
      }

      .rwdidno_text:hover {
        text-decoration: underline;
        color: #1890ff;
        cursor: pointer;
      }

      .card {
        height: 48%;
        width: 220px;

        padding: 5px;
        color: #fafafa;
        display: flex;
        flex-direction: column;
        margin-right: 10px;

        .item {
          display: flex;
          align-items: center;
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 8px;

          .value {
            margin-left: auto;
          }
        }
      }

      .active {
        border: 3px solid red;
      }

      .Text {
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 24px;
        font-weight: bold;
        letter-spacing: 4px;
        color: #c1c1c1;
      }
    }

    .divider {
      position: relative;

      .icon {
        position: absolute;
        padding: 15px;
        right: 50%;
        top: 50%;
        transform: translate(50%, -100%);
        background-color: #fff;
        font-size: 40px;
        cursor: pointer;
      }

      .icon:hover {
        color: #1890ff;
      }

      /deep/ .el-divider--vertical {
        height: 100%;
      }
    }
  }
}
</style>
